<template>
    <div class="main">
        <van-dropdown-menu>
            <van-dropdown-item v-model="value1" :options="option1" />
            <van-dropdown-item v-model="value2" :options="option2" />
            <van-dropdown-item title="筛选">
                <van-cell center title="小组作业">
                    <template #right-icon>
                        <van-switch v-model="switch1" />
                    </template>
                </van-cell>
                <van-cell center title="我反馈">
                    <template #right-icon>
                        <van-switch v-model="switch2" />
                    </template>
                </van-cell>
                <van-cell center title="全部反馈">
                    <template #right-icon>
                        <van-switch v-model="switch3" />
                    </template>
                </van-cell>
            </van-dropdown-item>
        </van-dropdown-menu>
        <van-search v-model="value" placeholder="搜索" />
        <van-collapse v-model="activeNames" accordion>
            <van-collapse-item 
                v-for="item in data"
                :key="item.id"
                :title="item.id+' '+item.name"
                :value="item.submit?'访问链接':'未作答'"
                :label="item.class"
            >
                <van-cell-group>
                    <van-cell title="得分" :value="item.score!=undefined?item.score:'未评'" />
                    <van-cell title="浏览" is-link :url="item.browse" value="打开/下载" />
                    <van-cell title="评语" :value="item.comment" />
                </van-cell-group>
            </van-collapse-item>
            
        </van-collapse>

    </div>
    

</template>
<script setup>
    import { ref } from 'vue';
    const activeNames = ref(['1']);
    const value1 = ref(0);
    const value2 = ref('a');
    const switch1 = ref(false);
    const switch2 = ref(false);
    const switch3 = ref(false);
    const option1 = [
      { text: 'Vue3开发初体验', value: 0 },
      { text: 'Vue3组件化开发', value: 1 },
      { text: 'Vue3路由的使用', value: 2 },
      { text: '电影列表项目', value: 3 },
      { text: 'Vue自动化测试', value: 4 },
      { text: '状态管理Pinia', value: 5 },
      { text: '使用UI组件库', value: 6 },
    ];
    const option2 = [
        { text: '全部班级', value: 'a' },
        { text: '22软件技术3班', value: 'b' },
        { text: '22软件技术1班', value: 'c' },
        { text: '21软件技术1班', value: 'd' },
        { text: '21软件技术2班', value: 'e' },
    ];
    const data= [
        {
            id: 22002339,
            name: '杨谨嘉',
            class: '22软件技术3班',
            score: 95,
            comment: '功能正常，按要求完成任务',
            submit: true,
            browse: "https://codelover.club/qb/personal?userID=791&currNo=43"
        },
        {
            id: 33333333,
            name: '测试学生3',
            class: '22软件技术3班',
            score: 85,
            comment: '功能正常，按要求完成任务',
            submit: true,
            browse: "https://codelover.club/qb/study/43"
        },
        {
            id: 3,
            name: '姓名',
            class: '22软件技术3班',
            score: undefined,
            comment: '',
            submit: true,
            browse: "https://codelover.club/qb/study/43"
        },
        {
            id: 4,
            name: '姓名',
            class: '22软件技术3班',
            score: undefined,
            comment: '',
            submit: false,
            browse: "https://codelover.club/qb/study/43"
        },
        {
            id: 5,
            name: '姓名',
            class: '22软件技术3班',
            score: 55,
            comment: '功能正常，按要求完成任务',
            submit: true,
            browse: "https://codelover.club/qb/study/43"
        }
    ]

</script>

<style scoped>
    .main{
        width: 100%;
    }
    .a1{
        background-color: antiquewhite;
    }
</style>